<template>
<div class="box">
    <h2>确认订单</h2>
    <div class="a">
        <!-- <span class="iconfont icon-dizhi a1"></span> -->
        <div class="a2">
            <h4>小白</h4>
            <p>陕西省西安市雁塔区丈八街道</p>
            <p>156545455</p>
        </div>
   </div>
         <div class="b">
            <img src="assets/img/img1.jpg" alt="">
           <div class="b1">
                <p>￥3499.00</p>
                <p><span>[预售]</span> adidas Yeezy 500 Utility Black 炭黑 </p>
                <div class="b2">
                    <span>有货UFO</span>紫色,39
                </div>
            </div>
        </div>
        <div class="c">
            <!-- <p>优惠券<span>0张可用</span></p><span>无可用&nbsp;&nbsp;&nbsp;&nbsp;&gt;</span> -->
            <!-- 优惠券单元格 -->
                <van-coupon-cell
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="showList = true"
                />
                <!-- 优惠券列表 -->
                <van-popup
                v-model="showList"
                round
                position="bottom"
                style="height: 90%; padding-top: 4px;"
                >
                <van-coupon-list
                    :coupons="coupons"
                    :chosen-coupon="chosenCoupon"
                    :disabled-coupons="disabledCoupons"
                    @change="onChange"
                    @exchange="onExchange"
                />
                </van-popup>
        </div>
        <div class="d">
            <div>
                 <p>商品金额：</p><span>￥3499.00</span>
            </div>
            <div>
                <p>运费：</p><span>+￥25.00</span>
            </div>
            <div>
              <p>实付金额：</p><span>￥3524.00</span> 
            </div>
        </div>
        <div class="e"> 付款成功后不支持无理由退换货</div>
        <div class="f">
            <h4>温馨提示</h4>
            <p>1.付款后，若卖家原因超时未发货或者商品查验未通过而导致交易失败，您可以获得赔偿金￥279.92元；</p>
            <p>2.鉴于平台出售的商品多为卖家个人二手全新闲置物品，并且溢价商品价格存在波动。不适用于七天无理由退换货以及交易后退还差价索取差额。</p>
        </div>
        <div class="g">
            <p>支付方式:在线支付</p>
            <p>配送方式:顺丰速运</p>
        </div>
    </div>
</template>
<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1600000000,
  endAt: 1614592000,
  valueDesc: '1.5',
  unitDesc: '元',
};
export default {
    name:"OrderBottom",
    data(){
        return {
            chosenCoupon: -1,
            coupons: [coupon],
            disabledCoupons: [coupon],
            showList:false,
            };
        },
        methods: {
            onChange(index) {
            this.showList = false;
            this.chosenCoupon = index;
            },
            onExchange(code) {
            this.coupons.push(coupon);
            },
        },
}
</script>
<style scoped>
/* @import url(../assets/fontQ/iconfont.css); */
.box{
     /* height:600px; */
    width: 100%; 
   margin: 0 auto;
   height: 505px;
}
h2{

    margin-bottom: 10px;
    margin-left: 20px;
}
.a{
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    height: auto;
    margin: 0 auto;
    width: 90%;
}
.a1{
    float: left;
    width: 30px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
.icon-dizhi{
font-size: 20px;
    color: black;
}
.a2{
    float: left;
    width: 292px;
    margin-left: 15px;
    margin-bottom: 15px;
}
.a2 h4{
    margin-bottom: 8px;
    margin-top: 15px;
}
.a2 p:nth-of-type(1){
    font-size: 10px;
    color: #ccc;
    margin-bottom: 10px;
}
.a2 p:nth-of-type(2){
    font-size: 12px;
}
.b{
    width: 90%;
    margin: 15px auto;
}
.b img{
    float: left;
    width: 60px;
    height: 50px;
    text-align: center;
    margin-top:10px;
    margin-bottom: 10px;
    margin-right: 25px; 
    display: block;
}
.b .b1{
    float: left;
    width: 200px;

}
.b1 p:nth-of-type(1){
    color: red;
    font-size: 10px;
   
}
.b1 p:nth-of-type(2){
    color: #ccc;
    font-size: 10px;
   margin-top: 10px;
}

.b1 p:nth-of-type(2) span{
    font-size: 14px;
    color: black;
}
.b2{
    /* margin-top:15px; */
    /* margin-bottom: 15px; */
    font-size: 14px;
}
.b2 span{
    width: 30px;
    height:15px;
    background-color: midnightblue;
    color: white;
    margin-right: 10px;
    border-radius: 3px;
    font-size: 10px;
}
.c{
   border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    width: 90%;
      margin:5px auto;
}
.c span{
    font-size: 12px;
    color: #ccc;
}
.c p span{
    margin-left: 10px;
    font-size: 10px;
}
.d{
    margin: 10px auto;
    width: 90%;
    height: 100px;
    font-size: 14px;

}
.d div{
    display: flex;
    justify-content: space-between;
    line-height: 30px;
}
.d div:nth-of-type(3) span{
    color: red;
}
.e{
   border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    margin: 0 auto;
    width: 90%;
    height: 50px;
    line-height: 50px;
   float: left;
}
.f{
    border-bottom:1px solid #ccc;
    margin: 0 auto;
    width: 90%;
    height: 150px;
    font-size: 12px;
    color:#ccc;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 20px;
}
.g{
    margin: 0 auto;
    width: 90%;
    height: 70px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 30px;
}
</style>


